<!doctype html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="Author" content="Captain Chen">
    <meta name="Keywords" content="web chat">
    <title>Web Chat Login</title>
    <style>
        #login_box {
            position: absolute;
            width: 350px;
            min-height: 480px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 0 #ccc;
            box-shadow: 0 4px 14px 0 rgb(206 207 209 / 50%);
            padding: 10px 20px;
        }

        .input_box {
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            width: 100%;
        }

        .button {
            width: 100%;
            line-height: 38px;
            text-align: center;
            font-weight: bold;
            color: #fff;
            text-shadow: 1px 1px 1px #333;
            border-radius: 5px;
            margin: 0 20px 20px 0;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .button.blue {
            border: 1px solid #1e7db9;
            box-shadow: 0 1px 2px #8fcaee inset, 0 -1px 0 #497897 inset, 0 -2px 3px #8fcaee inset;
            background: -webkit-linear-gradient(top, #42a4e0, #2e88c0);
            background: -moz-linear-gradient(top, #42a4e0, #2e88c0);
            background: linear-gradient(top, #42a4e0, #2e88c0);
        }

        .blue:hover {
            background: -webkit-linear-gradient(top, #70bfef, #4097ce);
            background: -moz-linear-gradient(top, #70bfef, #4097ce);
            background: linear-gradient(top, #70bfef, #4097ce);
        }

        .blue:active {
            top: 1px;
            box-shadow: 0 1px 3px #114566 inset, 0 3px 0 #fff;
            background: -webkit-linear-gradient(top, #1a71a8, #1976b1);
            background: -moz-linear-gradient(top, #1a71a8, #1976b1);
            background: linear-gradient(top, #1a71a8, #1976b1);
        }

        .hideIt {
            display: none
        }

        .lightIt {
            display: inline;
            color: red
        }
    </style>
    <script src="./static/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            state = $("#login_state").text();
            $("#check_name_status").addClass("hideIt").removeClass("lightIt");
            $("#check_password").addClass("hideIt").removeClass("lightIt");
            if (state == "user-not-exist")
                $("#check_name_status").addClass("lightIt").removeClass("hideIt");
            else if (state == "password-error")
                $("#check_password").addClass("lightIt").removeClass("hideIt");
        });
    </script>
</head>

<body style="background-color:#f6f8fb">
    <h1 style="padding:50px;color: #1e7db9;">Web Chat</h1>
    <div id="login_state" style="display:none">{{login_state}}</div>
    <div id="login_box">
        <div style="width: 100%;height: 38px;font-size: 22px;margin: 25px 0 20px 0;">登录</div>
        <form action="/login" method="post">
            <div style="margin-bottom: 22px;">
                <input id="user-name" type="text" name="user-name" autocomplete="off" placeholder="用戶名" maxlength="20"
                    class="input_box">
                <span id="check_name_status" class="hideIt">用户名不存在</span>
            </div>
            <div style="margin-bottom: 22px;">
                <input id="password" type="password" name="password" autocomplete="off" placeholder="密码" maxlength="16"
                    class="input_box">
                <span id="check_password" class="hideIt">密码错误！</span>
            </div>
            <div style="margin-bottom: 22px;">
                <button id="submit-button" type="submit" class="button blue">
                    <span>立即登录</span>
                </button>
            </div>
            <a href="/register" style="color:#409eff; text-decoration: none">
                <span>还没有账号？立即注册 </span>
            </a>
        </form>
    </div>
    </div>

</body>

</html>